<template>
	<div class="login_bg">
		<div class="login_adv" style="background-image: url(img/auth_banner.jpg)">
			<div class="login_adv__title">
				<h2>
					{{ app.name }}
					<span>{{ app.version }}</span>
				</h2>
				<h4>{{ $t('login.slogan') }}</h4>
				<p>{{ $t('login.describe') }}</p>
				<div>
					<span>
						<el-icon><sc-icon-vue /></el-icon>
					</span>
					<span>
						<el-icon class="add"><el-icon-plus /></el-icon>
					</span>
					<span>
						<el-icon><el-icon-eleme-filled /></el-icon>
					</span>
				</div>
			</div>
			<div class="login_adv__mask"></div>
			<div class="login_adv__bottom flex flex-wrap">
				<div v-if="copyright.isp" class="copyright">
					<img src="/img/gov_icon.png" class="h-[20px] mr-1" />
					<span class="mr-3">{{ $t('login.isp') }}{{ copyright.isp }}</span>
				</div>
				<div v-if="copyright.icp" class="copyright">
					<span class="mr-3">{{ $t('login.icp') }}{{ copyright.icp }}</span>
				</div>
				<div class="copyright">
					<span class="mr-3" v-if="copyright.company_name">{{ copyright.company_name }}</span>
					<span class="mr-3" v-if="copyright.copyright_desc">©{{ copyright.copyright_desc }}</span>
				</div>
			</div>
		</div>
		<div class="login_main">
			<div class="login_config">
				<el-button :icon="isDark ? 'el-icon-sunny' : 'el-icon-moon'" circle type="info" @click="configDark"></el-button>
				<el-dropdown trigger="click" placement="bottom-end" @command="configLang">
					<el-button icon="sc-icon-article" circle type="primary"></el-button>
					<template #dropdown>
						<el-dropdown-menu>
							<el-dropdown-item v-for="item in langs" :key="item.value" :command="item.value" :disabled="siteLang === item.value">{{ item.name }}</el-dropdown-item>
						</el-dropdown-menu>
					</template>
				</el-dropdown>
			</div>
			<div class="login-form">
				<div class="login-header">
					<div class="logo">
						<img alt="LADMIN" :src="app.icon || '/img/logo.png'" />
						<label>{{ webSite.name }}</label>
					</div>
				</div>
				<div class="login-form">
					<password></password>
				</div>
			</div>
		</div>
	</div>
</template>
<script setup lang="ts">
	// 动态加载密码登陆页
	const password = defineAsyncComponent(() => import('./components/password.vue'))
	// 获取系统存储实例
	const systemStore = useSystemStore()
	// 计算应用相关信息
	const app = computed(() => systemStore.app)
	// 计算网站相关信息
	const webSite = computed(() => systemStore.website)
	// 计算版权信息
	const copyright = computed(() => systemStore.copyright)
	// 计算网站是否为暗黑模式
	const isDark = computed(() => systemStore.layout.dark || false)
	// 计算网站语言
	const siteLang = computed(() => systemStore.layout.lang)
	// 切换暗黑模式
	const configDark = () => systemStore.toggleDark()
	// 切换显示语言
	const configLang = (value: string) => systemStore.setLang(value)
	// 语言选项数组
	const langs = [
		{ name: '简体中文', value: 'zh-cn' },
		{ name: 'English', value: 'en-us' }
	]
	// 监听暗黑模式的变化
	watch(
		() => systemStore.layout.dark,
		(val) => {
			darkSet(val)
		}
	)
	// 监听语言的变化
	watch(
		() => systemStore.layout.lang,
		(val) => {
			lang.global.locale = val
		}
	)
	// 根据暗黑模式的值设置页面样式
	const darkSet = (val: boolean) => {
		if (val) {
			document.documentElement.classList.remove('light')
			document.documentElement.classList.add('dark')
			tool.data.set('APP_DARK', val)
		} else {
			document.documentElement.classList.remove('dark')
			document.documentElement.classList.add('light')
			tool.data.remove('APP_DARK')
		}
	}
	// 组件挂载时执行的操作
	onMounted(() => {
		tool.cookie.remove('token')
		tool.data.clear()
	})
</script>
<style lang="less" scoped>
	.login_bg {
		width: 100%;
		height: 100%;
		background: #fff;
		display: flex;
	}
	.login_adv {
		width: 33.33333%;
		background-color: #555;
		background-size: cover;
		background-position: center center;
		background-repeat: no-repeat;
		position: relative;
	}
	.login_adv__title {
		color: #fff;
		padding: 40px;
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		z-index: 2;
	}
	.login_adv__title h2 {
		font-size: 40px;
		position: relative;
	}
	.login_adv__title h2 span {
		position: absolute;
		top: 5px;
		@apply text-xl pl-1;
	}
	.login_adv__title h4 {
		font-size: 18px;
		margin-top: 10px;
		font-weight: normal;
	}
	.login_adv__title p {
		font-size: 14px;
		margin-top: 10px;
		line-height: 1.8;
		color: rgba(255, 255, 255, 0.6);
	}
	.login_adv__title div {
		margin-top: 10px;
		display: flex;
		align-items: center;
	}
	.login_adv__title div span {
		margin-right: 15px;
	}
	.login_adv__title div i {
		font-size: 40px;
	}
	.login_adv__title div i.add {
		font-size: 20px;
		color: rgba(255, 255, 255, 0.6);
	}
	.login_adv__bottom {
		position: absolute;
		left: 0px;
		right: 0px;
		bottom: 0px;
		color: #fff;
		padding: 40px;
		background-image: linear-gradient(transparent, #000);
		z-index: 3;
	}
	.login_adv__bottom .copyright {
		@apply flex items-center justify-center;
	}
	.login_adv__mask {
		position: absolute;
		top: 0px;
		left: 0px;
		right: 0px;
		bottom: 0px;
		background: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}
	.login_main {
		flex: 1;
		overflow: auto;
		display: flex;
	}
	.login-form {
		width: 400px;
		margin: auto;
		padding: 20px 0;
	}
	.login-header {
		margin-bottom: 40px;
	}
	.login-header .logo {
		display: flex;
		align-items: center;
	}
	.login-header .logo img {
		width: 40px;
		height: 40px;
		vertical-align: bottom;
		margin-right: 10px;
	}
	.login-header .logo label {
		font-size: 26px;
		font-weight: bold;
	}
	.login-oauth {
		display: flex;
		justify-content: space-around;
	}
	.login-form .el-divider {
		margin-top: 40px;
	}
	.login-form:deep(.el-tabs) .el-tabs__header {
		margin-bottom: 25px;
	}
	.login-form:deep(.el-tabs) .el-tabs__header .el-tabs__item {
		font-size: 14px;
	}
	.login-form:deep(.login-forgot) {
		text-align: right;
	}
	.login-form:deep(.login-forgot) a {
		color: var(--el-color-primary);
	}
	.login-form:deep(.login-forgot) a:hover {
		color: var(--el-color-primary-light-3);
	}
	.login-form:deep(.login-reg) {
		font-size: 14px;
		color: var(--el-text-color-primary);
	}
	.login-form:deep(.login-reg) a {
		color: var(--el-color-primary);
	}
	.login-form:deep(.login-reg) a:hover {
		color: var(--el-color-primary-light-3);
	}
	.login_config {
		position: absolute;
		top: 20px;
		right: 20px;
	}
	.login-form:deep(.login-msg-yzm) {
		display: flex;
		width: 100%;
	}
	.login-form:deep(.login-msg-yzm) .el-button {
		margin-left: 10px;
		--el-button-size: 42px;
	}
	.qrCodeLogin {
		text-align: center;
		position: relative;
		padding: 20px 0;
	}
	.qrCodeLogin img.qrCode {
		background: #fff;
		padding: 20px;
		border-radius: 10px;
	}
	.qrCodeLogin p.msg {
		margin-top: 15px;
	}
	.qrCodeLogin .qrCodeLogin-result {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		text-align: center;
		background: var(--el-mask-color);
	}
	@media (max-width: 1200px) {
		.login-form {
			width: 340px;
		}
	}
	@media (max-width: 1000px) {
		.login_main {
			display: block;
		}
		.login_main .login_config {
			position: static;
			padding: 20px 20px 0 20px;
			text-align: right;
		}
		.login-form {
			width: 100%;
			padding: 20px 40px;
		}
		.login_adv {
			display: none;
		}
	}
</style>
